<script>
init({
  title: 'Update Cell',
  desc: 'Update the specified cell: `$table.bootstrapTable(\'updateCell\', {index: 1, field: \'name\', value: \'Updated Name\'})`.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <div id="toolbar">
    <div class="form-check form-check-inline">
      <input
        id="reinit"
        class="form-check-input"
        type="checkbox"
        checked
      >
      <label
        class="form-check-label"
        for="flexCheckDefault"
      >
        reinit
      </label>
    </div>
    <button
      id="button"
      class="btn btn-secondary"
    >
      updateCell
    </button>
  </div>
  <table
    id="table"
    data-toggle="table"
    data-toolbar="#toolbar"
    data-height="428"
    data-search="true"
    data-url="json/data1.json"
  >
    <thead>
      <tr>
        <th
          data-checkbox="true"
          data-field="state"
        ></th>
        <th
          data-field="id"
          data-sortable="true"
        >
          ID
        </th>
        <th
          data-field="name"
          data-sortable="true"
          data-width="300"
        >
          Item Name
        </th>
        <th
          data-field="price"
          data-sortable="true"
        >
          Item Price
        </th>
      </tr>
    </thead>
  </table>
</template>

<script>
  const $table = $('#table')
  const $button = $('#button')

  function mounted () {
    $button.click(function () {
      const checked = $('#reinit').prop('checked')

      if (!checked) {
        let i = 0
        const timeout = setInterval(() => {
          $table.bootstrapTable('updateCell', {
            index: 1,
            field: 'name',
            value: `Updated Name ${i++}`,
            reinit: false
          })
          if (i > 10) {
            clearInterval(timeout)
          }
        }, 100)
      } else {
        $table.bootstrapTable('updateCell', {
          index: 1,
          field: 'name',
          value: 'Updated Name'
        })
      }
    })
  }
</script>
